<template>
    <el-dialog
            :title="title"
            :visible.sync="isVisible"
            :width="width"
            :before-close="handleClose"
            :lock-scroll="true"
            :close-on-click-modal="false"
            custom-class="pub_dialog"
    >
      <div  style="margin-bottom: 15px">
        <div class="tabs-root">
          <div class="my-tabs">
            <el-tabs class="tabs-main" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane v-for="(item,index) in tabsData" :key="index" :label="item.label" :name="item.label">
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <urgeInfo
          :dialogVisible = dialogVisible
          :superviseOrderNum = superviseOrderNum
          v-if="activeName=='督办信息'"
        ></urgeInfo>
        <detailInfo
          v-else
          :id=id
          ref="detail"
          :dialogVisible = dialogVisible
          :openType=openType
          @success="success"
          @close="close"
        ></detailInfo>
      </div>
    </el-dialog>
</template>

<script>
  import detailInfo from './detailInfo.vue'
  import urgeInfo from '@/views/xy/common/urgeInfo'
    export default {
        components: {
          detailInfo, urgeInfo
        },
        props: {
            width: {
                type: String,
                default: "70%",
            },
            title: {
                type: String,
                default: "详情",
            },
            id:{},
            openType:{
                type:String,
                default:"add"
            },
            dialogVisible: {
                type: Boolean,
                default: false
            },
            superviseOrderNum:{
              type:String,
              default:""
            }
        },
        watch: {
            'width': {
                handler(newVal, oldVal) {
                    console.log('newVal===',newVal, oldVal)
                    let w = this.width.split('%')[0]
                    if(w>=60){
                        this.rowspan = 2
                    }else{
                        this.rowspan = 1
                    }
                },
                deep: true,
                immediate: true
            },
        },
        computed: {
            isVisible: {
                get() {
                    return this.dialogVisible
                },
                set() {
                    this.close()
                }
            }
        },
        data() {
            return {
              activeName: "基本信息",
              tabsData: [
                {label: '基本信息'},
                {label: '督办信息'},
              ]
            };
        },
      methods: {
        handleClick(tab, event) {
          console.log("切换====》",tab, event);
          this.activeComponents = this.tabsData[tab.index].label;
        },
        cancel(){
          this.close()
        },
        handleClose(done) {
          done()
          this.close()
        },
        success(){
          this.$emit('success')
        },
        close(){
          this.$refs.detail.close(1);
          this.$emit('close')
        },
      },
    };
</script>

<style lang="scss" scoped>
  .tabs-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px ;
    .my-tabs{
      background-color: transparent;
      flex-shrink: 0;
      .tabs-main:first-child{
        padding: 0 10px 0 0;
      }
      .tabs-main{
        padding: 0 10px;
      }
    }
    ::v-deep .el-tabs__nav{
      // padding: 0 20px;
    }
    ::v-deep .el-tabs__header{
      margin: 0;
      background-color: white;
      padding-left: 0px !important;
    }
    ::v-deep .el-tabs__item{
      height: 46px;
      line-height: 46px;
    }
  }
  ::v-deep .el-dialog__body{
    padding: 0 20rem;
  }
</style>

